import { forwardRef, useImperativeHandle } from "react";
import { useLayout } from "./../../context";
import useFoodGenerate from "./hook";
import config from "../../config";
import "./index.css";

export default forwardRef(function Food(_, ref) {
  const { gridSize } = useLayout();
  const points = useFoodGenerate(config.foodSize);

  // 暴露接口
  useImperativeHandle(
    ref,
    () => ({
      // 获取食物坐标集
      getFoodPoints() {
        return points;
      },
    }),
    [points]
  );

  return (
    <div className="food">
      {points.map((point, index) => (
        <div
          className="food-item"
          key={index}
          style={{
            width: gridSize,
            height: gridSize,
            left: point.x,
            top: point.y,
          }}
        ></div>
      ))}
    </div>
  );
});
